<template>
    <view class="page-wrap">
        <image class="cover" :src="info.cover"></image>
        <view class="title">{{info.title}}</view>
        <view class="order">
            <view class="item" v-if="info.payStatus == 'PAYED'">
                <view class="label">支付时间：</view>
                <view class="value">{{info.payTime}}</view>
            </view>
            <view class="item" v-if="info.payStatus == 'PAYED'">
                <canvas id="qrcode" canvas-id="qrcode" class="qrcode"></canvas>
                <cover-image v-if="info.offseted == 1" src="../../static/utils/used.png" class="used"></cover-image>
            </view>
        </view>
        <view class="content">
            <u-parse :content="info.content" :show-with-animation="true" :lazy-load="true" />
        </view>
    </view>
</template>

<script>
    import UQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';

    export default {
        data() {
            return {
                id: '',
                info: {},
                canBuy: false,
            };
        },
        computed: {},
        methods: {
            drawQrcode(data) {
                var qr = new UQRCode();
                // 设置二维码内容
                qr.data = data;
                // 设置二维码大小，必须与canvas设置的宽高一致
                qr.size = uni.upx2px(300);
                // 调用制作二维码方法
                qr.make();
                // 获取canvas上下文
                var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
                // 设置uQRCode实例的canvas上下文
                qr.canvasContext = canvasContext;
                // 调用绘制方法将二维码图案绘制到canvas上
                qr.drawCanvas();
            }
        },
        watch: {},
        onLoad(option) {
            this.id = option.id;
        },
        onShow() {
            this.id && this.$api.voucher.orderDetail({
                id: this.id
            }).then(res => {
                this.info = res.info
                this.canBuy = res.canBuy
                this.drawQrcode(res.qrcode)
            })
        },
        onHide() {},
        onUnload() {},
        onReachBottom() {},
        onPageScroll(event) {},
        onPullDownRefresh() {},
        onShareAppMessage(options) {}
    };
</script>

<style lang="scss">
    .page-wrap {
        background: #fff;
        padding: 0 32rpx;
        font-size: 32rpx;
        min-height: 100vh;
        padding-bottom: 130rpx;

        .cover {
            margin: 0 -32rpx;
            width: 750rpx;
            height: 480rpx;
        }

        .title {
            text-align: center;
            padding: 16rpx 0;
            border-bottom: 1rpx solid #eee;
            margin-bottom: 16rpx;
            font-weight: bold;
        }

        .order {
            border: 1rpx solid #eee;
            border-radius: 32rpx;
            padding: 32rpx;
            margin: 16rpx 0 32rpx 0;

            .item {
                display: flex;
                position: relative;

                &+.item {
                    margin-top: 32rpx;
                }

                .label {
                    width: 5em;
                    text-align: right;
                }

                .value {
                    flex-grow: 1;
                }

                .qrcode {
                    width: 300rpx;
                    height: 300rpx;
                    display: block;
                    margin: 0 auto;
                }

                .used {
                    position: absolute;
                    left: 190rpx;
                    top: 50rpx;
                    width: 246rpx;
                    height: 200rpx;
                    z-index: 999;
                }
            }
        }

    }
</style>